<template>
  <van-cell class="staff-info" title="" @click="$router.push(`/staff/detail/${staffs.id}`)">
    <template v-slot:label>
      <van-row class="row">
        <van-col class="cover-wrap">
          <van-image class="cover-item-img" :src="staffs.staffPhoto" fit="cover" />
        </van-col>
        <van-col class="info-wrap">
          <van-row type="flex" justify="space-between">
            <h4>{{ staffs.name }}</h4>
            <span v-if="contact" >{{ staffs.telephone }}</span>
            <span v-else>{{ staffs.salary }}元/{{ staffs.workdays }}天</span>
          </van-row>
          <div class="tag">
            <van-tag v-for="(item, index) in staffs.tag" :key="index" type="primary" plain round>{{ item }}</van-tag>
          </div>
          <div class="msg" v-if="contact">{{ staffs.company }}</div>
          <div class="msg" v-else>
            <span>{{ staffs.address }}</span>
            <span> | </span>
            <span>{{ staffs.age }}岁</span>
            <span> | </span>
            <span>服务{{ staffs.service }}户</span>
            <span> | </span>
            <span>评价{{ staffs.comment }}条</span>
          </div>
        </van-col>
      </van-row>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'StaffInfo',
  components: {},
  props: {
    staffs: { type: Object, required: true },
    contact: { type: Boolean, default: false }
  },
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.staff-info {
  .row {
    display: flex;
  }
  .cover-wrap {
    margin-right: 20px;
    width: 160px;
    height: 160px;
    .cover-item-img {
      width: 100%;
      height: 100%;
    }
  }
  .info-wrap {
    flex: 1;
    h4 {
      margin: 0;
      font-size: 28px;
      color: #333;
    }
    .tag {
      margin: 26px 0;
      .van-tag {
        margin-right: 20px;
        padding: 0 30px;
        height: 40px;
      }
    }
  }
}
</style>
